
<script setup>
import { userCateListService } from '../../../api/article'

import { ref } from 'vue'

defineProps({
  modelValue: {
    type: [Number, String]
  },
  width: {
    type: String
  }
})

const cartList = ref([])

// 与父组件通信  定义事件发射器
const emit = defineEmits(['update:modelValue'])
const getCartList = async () => {
  const res = await userCateListService()
  cartList.value = res.data.data
}

getCartList()
</script>
<template>
  <!-- emit  触发自定义事件 'update:modelValue' 为自定义事件名  $event 传递的数据-->
  <el-select
    :modelValue="modelValue"
    @update:modelValue="emit('update:modelValue', $event)"
    :style="{ width }"
  >
    <el-option
      v-for="cartlist in cartList"
      :key="cartlist.id"
      :label="cartlist.cate_name"
      :value="cartlist.id"
    ></el-option>
  </el-select>
</template>